<script setup lang="ts">
import { onMounted } from 'vue';
import { useGeneral } from '@/hooks/useGeneral';
import { useAtlasStore } from '@/store/modules/atlas';
import COMPONENT_TITLES from '@/constants/components/componentsTitle';
import { useSiteInfoStore } from '@/store/modules/earlyWarning/useSiteInfoStore';
import { useNetworkRiskGradingStore } from '@/store/modules/earlyWarning/networkRiskGrading';

const titleHandle = (title: string) => {
  switch (title) {
    case COMPONENT_TITLES.SITE_INFO:
      openSiteInfo();
      break;
    case COMPONENT_TITLES.NETWORK_TITLE:
      pipDialogOpen();
      break;
    default:
      break;
  }
};
const { openSiteInfo } = useSiteInfoStore();
const { pipDialogOpen } = useNetworkRiskGradingStore();
const { moduleLeft, moduleRight, retract, flexStyle } = useGeneral();
const { updateSvgUrl } = useAtlasStore();

onMounted(() => {
  updateSvgUrl();
});
</script>

<template>
  <div class="mid-container">
    <topComponents class="topComponents-box" />
    <transition name="el-fade-in-linear">
      <div v-if="retract" class="side-container left">
        <div v-for="item in moduleLeft" :key="item.id" :class="['box', item.title === COMPONENT_TITLES.MONITORING_EQUIPMENT && 'monitoringBox']">
          <div @click="titleHandle(item.title)" :class="['title', item.id === 1 && 'isPointer']">{{ item.title }}</div>
          <div class="content">
            <component :is="item.components"></component>
          </div>
        </div>
      </div>
    </transition>
    <transition name="el-fade-in-linear">
      <div v-if="retract" class="side-container right">
        <div v-for="item in moduleRight" :key="item.id" class="box" :style="flexStyle(item)">
          <div class="title">{{ item.title }}</div>
          <div class="content">
            <component :is="item.components"></component>
          </div>
        </div>
      </div>
    </transition>
    <routerButton class="router-box" />
  </div>
</template>

<style scoped lang="scss">
.mid-container {
  display: flex;
  justify-content: space-between;
  width: 100%;
  height: 100%;
  padding: 50px;
  position: relative;

  .topComponents-box {
    position: absolute;
    top: 8%;
    left: 50%;
    transform: translateX(-50%);
  }

  .router-box {
    z-index: 4;
    position: absolute;
    left: 50%;
    bottom: 5%;
    transform: translateX(-50%);
  }
}

.side-container {
  z-index: 5;
  flex: 0 0 25%;
  padding: 20px;
  background: linear-gradient(270deg, rgba(9, 48, 111, 0.4) 0%, rgba(9, 48, 111, 0.8) 100%);
  box-shadow: 0px 0px 20px #09306f;
  opacity: 1;
  border-radius: 6px;
  box-sizing: border-box;

  .box {
    height: 33.3%;
    border-radius: 4px;
    display: flex;
    flex-direction: column;

    .title {
      width: 100%;
      background: url(@/assets/largescreen/title-pic.png) no-repeat center center;
      background-size: cover;
      padding-left: 5%;
      font-size: 20px;
      color: white;
      line-height: 38px;
      font-family: PangMenZhengDao;
    }

    .isPointer {
      cursor: pointer;
    }

    .content {
      font-size: 14px;
      padding-top: 1.5rem;
      height: calc(100% - 1.5rem);
    }
  }

  .monitoringBox {
    height: 100%;
  }
}

.left {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.right {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
</style>
